<template>
	<view class="contianer" :class="'wp-' + platform">
		<cu-custom :bgColor="theme.bgnav" :isBack="true" Barborder="solid-bottom">
			<block slot="content">会议中心</block>
		</cu-custom>
		<view class="mainpageitem">
			<!-- #ifdef APP-PLUS -->
			<u-sticky :offset-top="CustomBar">
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<u-sticky :offset-top="StatusBar + 1">
					<!-- #endif -->
					<!-- <view class="cu-list menu shadow bg-white "> -->
					<view class="address-menu shadow bg-white">
						<view class="menu-item" @click="handleShowRoomTag">
							<view class="item-icon">
								<!-- <u-icon name="/static/rtcicon/voice-white.png" size="24"></u-icon> -->
								<text class="cuIcon cuIcon-add text-white"></text>
							</view>
							<view class="item-text">
								加入会议
							</view>
						</view>
						<view class="menu-item" @click="handleCreateMeet">
							<view class="item-icon">
								<!-- <u-icon name="/static/rtcicon/voice-white.png" size="24"></u-icon> -->
								<text class="cuIcon cuIcon-light text-white"></text>
							</view>
							<view class="item-text">
								快速会议
							</view>
						</view>
						<view class="menu-item" @click="handleOrderMeet">
							<view class="item-icon">
								<!-- <u-icon name="/static/rtcicon/video-white.png" size="24"></u-icon> -->
								<text class="cuIcon cuIcon-time text-white"></text>
							</view>
							<view class="item-text">
								预约会议
							</view>
						</view>
					</view>
				</u-sticky>
				<view class="user-list" v-for="(item, index) in callList">
					<view class="user-item" @click="goLiveKitInfo(item)">
						<u-avatar :size="40" shape="square" :src="getAvatar(item.sender)">
						</u-avatar>
						<view class="user-name">
							<view class="user-nick">
								<template v-if="item.type=='quick'">
									{{callName(item)}}发起的<i class="c-46b6ef">快速会议</i>
								</template>
								<template v-if="item.type == 'order'">
									{{callName(item)}}发起的<i class="c-46b6ef">预约会议</i>
								</template>
								<!-- <template v-else>
									{{callName(item)}}发起了{{item.audio?'语音':'视频'}}通话
								</template> -->
							
							<text class="fr text-grey padding-right">{{$u.timeFrom(item.createTime, 'yyyy年mm月dd日')}}</text>
							</view>
							<view class="user-org text-gray text-sm">
								<view class="user-org-list">
									({{Object.values(JSON.parse(item.memberList)).length}}人){{callMember(item)}}
								</view>
								<!-- <u-tag size="mini" class="fr padding-right" :text="callText(item)"
									:type="callInfo(item)"></u-tag> -->
							</view>
						</view>
						<view class="originClass">
							<text v-if="item.audio == 1" class="cuIcon cuIcon-phone text-white"></text>
							<text v-else class="cuIcon cuIcon-video text-white"></text>
						</view>
					</view>
				</view>
				<view class="padding solid-top" v-if="callList.length == 0">
					<view class="text-empty">空无一人，快找个人聊聊吧~</view>
				</view>
		</view>
		
	</view>
</template>

<script>
	import {
			mapGetters
		} from 'vuex';
	import * as API_liveKit from '@/api/livekit'
	import core from '@/core';
	import store from '@/store';
	import configs from '@/config/config'
	export default {
		data() {
			return {
				callList: [],
				userList: [],
				configs: configs,
				theme: core.style,
				text: core.langs,
				platform: core.platform,
			};
		},
		async onLoad() {
			this.userList = this.$bookData
		},
		computed:{...mapGetters(['user']),},
		methods: {
			
			handleShowRoomTag(){
				this.naviTo('livekit/liveadd')
			},
			handleOrderMeet(){
				this.naviTo('livekit/booking')
			},
			async handleCreateMeet(){
				if (this.$nativeRtc.isUIKitEnable()) {
					
					// let friends = await findFriends()
					let nativeFri = []
					this.userList.forEach(item => {
						const obj = {
							"id": item.id,
							"name": item.alias || item.name,
							"logo": configs.avatarUrl + '/' + item.id + '.jpg'
						}
						if(this.user.id!==item.id) nativeFri.push(obj)
					})
					// 更新通讯录
					await this.$nativeRtc.updateFriendList({friends: nativeFri})
					// 调用原生插件
					this.$nativeRtc.onCreateMeeting({
						"fromGroupMode":false,
					})
					return;
					
				}else{
					this.naviTo('livekit/inviteBook');
				}
			},
			goLiveKitInfo(item){
				this.naviTo('livekit/livekitInfo?id='+item.id);
			},
			callName(item){
				const members = JSON.parse(item.memberList)
				return members[item.sender]
			},
			callMember(item){
				const members = JSON.parse(item.memberList)
				return Object.values(members).toString()
			},
			// 创建一个异步函数createMeet，接收一个参数params
			async createMeet(params){
				uni.showLoading({
					title: '正在创建会议...',
					mask: true
				});
				const resp = await API_liveKit.createMeet(params) //  创建房间
				uni.hideLoading();
				if (resp.code == 200 && resp.data) {
					return resp
				} else {
					return core.toast('会议创建失败，请联系管理员')
				}
			},
		}
	};
</script>

<style lang="scss">
	.address-menu {
		display: flex;
		background-color: #FFFFFF;
		text-align: center;

		.menu-item {
			flex: 1;
			padding: 15rpx 0;
			border-right: none;

			&:first-child {
				border-left: none;
			}

			.item-text {
				padding-top: 10rpx;
			}

			.item-icon {
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				display: inline-block;
				margin: 0 auto;
				background: #00cc76;
				border-radius: 50%;
			}

			.item-icon .cuIcon {
				font-size: 36rpx
			}

			.item-icon-2 {
				background: #2682ff;
			}
		}
	}

	.user-list {
		width: 100%;

		.u-index-anchor {
			border: none;
		}

		.user-item {
			width: 100%;
			display: flex;
			align-items: center;
			height: 120rpx;
			padding-left: 20rpx;
			border-bottom: 2rpx solid #ebebeb;
			background: #fff;
			position: relative;
			overflow: hidden;

			.user-name {
				flex: 1;
				padding-left: 20rpx;

				.user-nick {}

				.user-org {
					padding-top: 10rpx;

					.user-org-list {
						float: left;
						width: 375rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.originClass {
				position: absolute;
				top: 10rpx;
				left: 80rpx;
				width: 38rpx;
				height: 38rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #00cc76;
				border-radius: 50%;
				border: 1px solid #fff;

				.cuIcon {
					font-size: 24rpx
				}
			}
		}
	}

	.cu-list.menu>.cu-item .content {
		display: flex;
		align-items: center;
	}

	.popcontainer {
		position: absolute;
		right: 20upx;
		background: #2C405A;
		padding: 10upx 20upx;
		top: calc(90upx + var(--status-bar-height));
	}

	.popcontainer .cu-item {
		background: none !important;
		color: #FFFFFF;
		min-height: 72upx;
		padding: 0 10upx;
	}

	.popcontainer .cu-item::after {
		border-color: #666666 !important;
	}

	.popcontainer .cu-item text[class*=cuIcon] {
		font-size: 36upx;
	}

	.popcontainer::after {
		width: 20upx;
		height: 20upx;
		background: #2C405A;
		content: '';
		right: 16upx;
		top: -8upx;
		position: absolute;
		transform: rotate(45deg);
		border-radius: 4upx;
	}

	.wp-ttapp .popcontainer,
	.wp-wxapp .popcontainer {
		right: auto;
		left: 20upx;
	}

	.wp-ttapp .popcontainer::after,
	.wp-wxapp .popcontainer::after {
		right: auto;
		left: 16upx;
	}
</style>